<template>
	<view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 选择类型</text>
			</view>
			<view class="values" style="padding-bottom: 0;">
				<view class="options">
				  <view v-for="item in settings.styleDetails" class="option-item" :class="{active: group_name === item.GroupName}" @click="switchGroup(item.GroupName)" style="width: 180rpx; height: 100rpx;">
					<image :src="item.ShowImage" :alt="item.GroupName">
					<text>{{ item.GroupName }}</text>
				  </view>
				  <view style="clear:both;"></view>
				</view>
			</view>
		</view>
		<view class="setting-row" style="padding-right: 0;">
			<view class="label">
				<text>✳ 选择风格</text>
			</view>
			<view class="values" style="padding-bottom: 0;">
				<view class="options">
					<view v-for="item in styles" class="option-item" :class="{active: options.engine === item.engine && options.style === item.value}" @click="switchEngine(item.engine, item.value)" :title="item.text">
						<image :src="item.poster" :alt="item.text">
						<text>{{ item.text }}</text>
					</view>
					<view style="clear:both;"></view>
				</view>
			</view>
		</view>
		<view class="setting-row" style="padding-right: 0;" v-if="sub_styles && sub_styles.length > 0">
			<view class="label">
				<text>✳ 选择模式</text>
			</view>
			<view class="values" style="padding-bottom: 0;">
				<view class="options">
					<view v-for="item in sub_styles" class="option-item" :class="{active: options.sub_style === item.value}" @click="switchSubStyle(item.value)" :title="item.text">
						<image :src="item.poster" :alt="item.text">
						<text>{{ item.text }}</text>
				    </view>
					<view style="clear:both;"></view>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 画面描述</text>
			</view>
			<view class="values">
				<prompt type="yijian" ref="prompt"></prompt>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 画布比例</text>
				<view class="help" @tap="showHelp" data-text="指定生成图像的宽高比">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="size-list">
					<view class="size-item" :class="{active: options.size === 0}" @tap="switchSize" :data-value="0">
						<view class="size-block" style="width: 64rpx; height: 48rpx;"></view>
						<text>4:3</text>
					</view>
					<view class="size-item" :class="{active: options.size === 1}" @tap="switchSize" :data-value="1">
						<view class="size-block" style="width: 48rpx; height: 36rpx;"></view>
						<text>3:4</text>
					</view>
					<view class="size-item" :class="{active: options.size === 2}" @tap="switchSize" :data-value="2">
						<view class="size-block" style="width: 64rpx; height: 64rpx;"></view>
						<text>1:1</text>
					</view>
					<view class="size-item" :class="{active: options.size === 3}" @tap="switchSize" :data-value="3">
						<view class="size-block" style="width: 64rpx; height: 36rpx;"></view>
						<text>16:9</text>
					</view>
					<view class="size-item" :class="{active: options.size === 4}" @tap="switchSize" :data-value="4">
						<view class="size-block" style="width: 36rpx; height: 48rpx;"></view>
						<text>9:16</text>
					</view>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 参考图</text>
				<view class="help" @tap="showHelp" data-text="参考图尺寸限1000x1000像素以内">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="uploader">
					<uv-upload name="image" :fileList="imageList" :maxCount="1" :deletable="true" :previewFullImage="true" width="120rpx" height="120rpx" @afterRead="uploadAfterRead" @delete="uploadDelete"></uv-upload>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import prompt from './prompt'
	export default {
		components: {
			prompt
		},
		props: {
			settings: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				defaultOptions: {
					engine: 'default_dreamer_diffusion',
					style: '',
					sub_style: '',
					size: 0,
					image: '',
					words: []
				},
				groups: [],
				styles: [],
				options: {},
				group_name: '',
				imageList: []
			}
		},
		watch: {
			group_name() {
				this.settings.styleDetails.forEach(item => {
					if(this.group_name === item.GroupName) {
						this.styles =  item.Styles
						// 默认选第一个
						if (item.Styles.length > 0) {
							this.options.engine = item.Styles[0].engine
							this.options.style = item.Styles[0].value
						} else {
							this.options.engine = ''
							this.options.style = ''
						}
					}
				})
			}
		},
		computed: {
			sub_styles() {
				var sub_styles = []
				this.styles.forEach(item => {
					if (this.options.engine === item.engine && this.options.style === item.value) {
						// 默认选第一个
						if (item.sub_styles.length > 0) {
							this.options.sub_style = item.sub_styles[0].value
						} else {
							this.options.sub_style = ''
						}
						sub_styles= item.sub_styles
					}
				})
				return sub_styles
			}
		},
		created() {
			var groups = []
			this.settings.styleDetails.forEach((item, index) => {
			  groups.push({
				title: item.GroupName,
				poster: item.ShowImage
			  })
			  if(index === 0) {
				this.group_name = item.GroupName
			  }
			})
			this.groups = groups
			this.options = JSON.parse(JSON.stringify(this.defaultOptions))
		},
		methods: {
			showHelp(e) {
				const text = e.currentTarget.dataset.text
				if (text) {
					app.globalData.util.message(text)
				}
			},
			switchGroup(group_name) {
				this.group_name = group_name
			},
			switchEngine(engine, style) {
				this.options.engine = engine
				this.options.style = style
			},
			switchSubStyle(sub_style) {
			    this.options.sub_style = sub_style
			},
			switchSize(e) {
				const value = e.currentTarget.dataset.value
				this.$set(this.options, 'size', value)
			},
			// 删除图片
			uploadDelete(event) {
				this.imageList = []
				this.options.image = ''
			},
			// 上传图片
			uploadAfterRead(event) {
				let file = event.file
				this.imageList = [{
					...file,
					status: 'uploading',
					message: '上传中'
				}]
				app.globalData.util.upload({
					url: '/upload/image',
					filePath: file.url,
					loading: false
				}).then(res => {
					this.imageList = [{
						status: 'success',
						message: '',
						url: res.data.path
					}]
					this.options.image = res.data.path
				}).catch(err => {
					this.imageList = [{
						...file,
						status: 'failed',
						message: '上传失败'
					}]
					this.options.image = ''
				})
			},
			getDrawOptions() {
				const options = JSON.parse(JSON.stringify(this.options))
				options.words = this.$refs['prompt'].getWordsPicked()
				return options
			},
			clearDrawOptions() {
				this.options.image = ''
				this.$refs.prompt.clearPicked()
			},
			setDrawOptions(options) {
				options = Object.assign(this.defaultOptions, options)
				this.options = JSON.parse(JSON.stringify(options))
				if (options.words) {
					this.$refs.prompt.setWords(options.words)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setting-row {
		width: 100%;
		margin-bottom: 20rpx;
		background: #f7f7f8;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.label {
			width: 100%;
			font-size: 32rpx;
			line-height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.help {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.values {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;

			.uploader {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				border: 1px dotted #ccc;
			}

			.size-list {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;

				.size-item {
					display: block;
					border-radius: 8rpx;
					position: relative;
					width: 86rpx;
					height: 130rpx;
					padding: 10rpx;
					border: 1px solid #ddd;
					box-sizing: border-box;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.size-block {
						background: #ddd;
						border-radius: 8rpx;
					}

					text {
						color: #333;
						font-size: 28rpx;
						text-align: center;
					}

					&.active {
						border-color: #04BABE;

						.size-block {
							background-color: #04BABE;
						}
					}
				}
			}
			
			
			.options {
				width: 100%;
				.option-item {
					width: 120rpx;
					height: 120rpx;
					float: left;
					margin-bottom: 10rpx;
					margin-right: 10rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					position: relative;
					overflow: hidden;
					cursor: pointer;
					transition: all .2s;
					background-clip: padding-box, border-box;
					background-origin: padding-box, border-box;
					border: 4rpx solid transparent;
					padding: 4rpx;
					&.active {
						// background-image: linear-gradient(to right,#333333, #333333),linear-gradient(270deg,#FF5CE4 0%, #36C2FF 100%);
						border-color: #04BABE;
					}
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
					text {
						position: absolute;
						left: 4rpx;
						bottom: 4rpx;
						right: 4rpx;
						height: 72rpx;
						line-height: 88rpx;
						border-radius: 20rpx;
						white-space: nowrap;
						text-align: center;
						z-index: 9;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
						background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%)
					}
				}
			}
		}
	}
</style>